<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>中国省市区地址三级联动jQuery插件</title>
	<link href="http://www.jq22.com/jquery/bootstrap-3.3.4.css" rel="stylesheet">
	<style>
		body{
			width:300px;
		}
	</style>
</head>
<body>
	<div class="container">
	    <form class="form-inline">
	      <div data-toggle="distpicker">
	        <div class="form-group">
	          <label class="sr-only" for="province1">Province</label>
	          <select class="form-control" id="province1"></select>
	        </div>
	        <div class="form-group">
	          <label class="sr-only" for="city1">City</label>
	          <select class="form-control" id="city1"></select>
	        </div>
	        <div class="form-group">
	          <label class="sr-only" for="district1">District</label>
	          <select class="form-control" id="district1"></select>
	        </div>
	      </div>
	    </form>
	</div>
	
	<script src="http://www.jq22.com/jquery/1.11.1/jquery.min.js"></script>
	<script src="http://www.jq22.com/jquery/bootstrap-3.3.4.js"></script>
	<script src="../../js/distpicker.data.js"></script>
	  <script src="../../js/distpicker.js"></script>
	  <script src="../../js/wsz/main.js"></script>
	  <script type="text/javascript">
	  $("#district1").blur(function(){
		  var dz = $("#province1").val()+$("#city1").val()+$("#district1").val();
		  alert(dz);
		});
	  </script>
</body>
</html>